<template>
  <el-popover placement="right" trigger="click" :title="title">
    <div style="height:300px">
      <div style="float:left">
      <el-input size="mini" placeholder="输入关键字进行过滤" v-model="filterText" style="padding-bottom: 5px;"></el-input>
      <el-scrollbar>
        <el-tree ref="tree" :data="formatData" @node-click="handleNodeClick" :expand-on-click-node="false" :default-expanded-keys="rid"
          highlight-current node-key="id" :filter-node-method="filterNode" :props="{
      label: 'name',
    }"></el-tree>
      </el-scrollbar>
      </div>
      <div style="float:left;padding-left: 20px;">
      <el-transfer
      style="text-align: left;"
      v-model="values"
      filterable
      :titles="['可选值', '已选值']"
      :format="{
        noChecked: '${total}',
        hasChecked: '${checked}/${total}'
      }"
      :props="{
        key:'id',
        label:'name'
      }"
      @change="handleChange"
      :data="transData">
      <span slot-scope="{ option }">{{ option.id }} - {{ option.name }}</span>
    </el-transfer>
    </div>
    </div>
    <input type="hidden" v-model="ids">
    <el-input v-model="names" slot="reference" :readonly="true"></el-input>
    
  </el-popover>
</template>
<script>
  import Vue from 'vue'
  import * as service from "@/api/crud.base";
  import TreeUtil from '@/libs/tree'
  export default {
    props: {
      title:{
        type:String
      },
      selected: {
        type: Array,
      },
      data:{
        type: Array,
        required:true
      }
    },
    data() {
      return {
        values:[],
        transData:[],
        filterText: '',
        ids:[],
      }
    },
    methods: {
      getObjectByIds(ids,objects){
        let ret=[];
        for(let id of ids){
          for(let record of objects){
            if(id==record.id){
              ret.push(record);
              break;
            }
          }
        }
        return ret;
      },
      setTransData(res){
        if (res.length > 0) {
          let selectedObject = this.getObjectByIds(this.values,this.transData);
          for(let object of selectedObject){
            let ret = true;
            for(let obj of res){
              if(object.id==obj.id){
                ret=false;
                break;
              }
            }
            if(ret){
              res.push(object);
            }
          }
          this.transData = res;
        }
      },
      handleNodeClick(data) {
        this.$emit("node-click",data);
      },
      filterNode(value, data) {
        if (!value) return true;
        return data.name.indexOf(value) !== -1;
      },
      handleChange(value, direction, movedKeys){
        this.ids=value;
        this.$emit('input',value);
      },
    },
    watch: {
      selected(val) {
        this.transData=val;
        this.ids=val.map(s=>s.id);
        this.values=this.ids;
      },
    },
    computed: {
      formatData() {
        var tree = TreeUtil.arrayTransTree(this.data, 'pid', 'children');
        return tree;
      },
      names() {
        let names = this.getObjectByIds(this.ids,this.transData).map(s=>s.name).join(",");
        return names;
      },
      rid(){
        let id=[];
        for(let record of this.data){
          if(!record.pid){
            id[0]=record.id
            break;
          }
        }
        return id;
      }
    },
    mounted() {
//       service.list('/orgs').then(res => {
//         this.data = res;
//       });
    }
  }
</script>
